<template>
	<view class="share-preview-container">
		<!-- 加载状态 -->
		<view v-if="loading" class="loading-container">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		
		<!-- 比赛信息卡片 -->
		<view v-else-if="matchDetail" class="match-card">
			<!-- 分享标识 -->
			<view class="share-badge">
				<uni-icons type="share" size="16" color="#1BAE76"></uni-icons>
				<text class="share-text">比赛分享</text>
			</view>
			
			<!-- 比赛头部 -->
			<view class="match-header">
				<text class="match-title">{{ matchDetail.title }}</text>
				<view class="match-status" :class="'status-' + matchDetail.status">
					{{ getStatusText(matchDetail.status) }}
				</view>
			</view>
			
			<!-- 核心信息 -->
			<view class="match-info">
				<view class="info-row">
					<uni-icons type="calendar" size="18" color="#1BAE76"></uni-icons>
					<text class="info-text">{{ formatDateRange(matchDetail.start_date, matchDetail.end_date) }}</text>
				</view>
				
				<view class="info-row">
					<uni-icons type="location" size="18" color="#1BAE76"></uni-icons>
					<text class="info-text">{{ matchDetail.location }}</text>
				</view>
				
				<view class="info-row">
					<uni-icons type="flag" size="18" color="#1BAE76"></uni-icons>
					<text class="info-text">{{ matchDetail.level }}</text>
				</view>
				
				<view v-if="matchDetail.organizer_info" class="info-row">
					<uni-icons type="person" size="18" color="#1BAE76"></uni-icons>
					<text class="info-text">{{ matchDetail.organizer_info.nickname }}</text>
				</view>
			</view>
			
			<!-- 简介信息 -->
			<view v-if="matchDetail.description" class="match-description">
				<text class="description-text">{{ matchDetail.description.substring(0, 100) }}{{ matchDetail.description.length > 100 ? '...' : '' }}</text>
			</view>
			
			<!-- 统计信息 -->
			<view v-if="scheduleStats.totalSlots > 0" class="match-stats">
				<view class="stat-item">
					<text class="stat-number">{{ scheduleStats.totalSlots }}</text>
					<text class="stat-label">场次</text>
				</view>
				<view class="stat-item">
					<text class="stat-number">{{ matchDetail.referee_positions ? matchDetail.referee_positions.length : 0 }}</text>
					<text class="stat-label">职位</text>
				</view>
				<view class="stat-item">
					<text class="stat-number">{{ scheduleStats.totalApplications }}</text>
					<text class="stat-label">报名</text>
				</view>
			</view>
		</view>
		
		<!-- 错误状态 -->
		<view v-else class="error-container">
			<uni-icons type="info-filled" size="60" color="#ddd"></uni-icons>
			<text class="error-text">比赛信息加载失败</text>
		</view>
		
		<!-- 底部操作 -->
		<view v-if="matchDetail" class="bottom-actions">
			<button class="detail-btn" @click="viewFullDetail">
				<uni-icons type="right" size="16" color="#fff"></uni-icons>
				<text class="detail-text">查看完整详情</text>
			</button>
		</view>
		
		<!-- 分享来源提示 -->
		<view class="share-tip">
			<text class="tip-text">📱 通过好友分享 · 裁判选派系统</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading: true,
			matchId: '',
			matchDetail: null,
			scheduleStats: {
				totalSlots: 0,
				totalApplications: 0
			},
			shareFrom: ''
		}
	},
	
	onLoad(options) {
		if (options.id) {
			this.matchId = options.id
			this.shareFrom = options.from || ''
			this.loadMatchDetail()
		} else {
			this.handleError('缺少比赛ID参数')
		}
	},
	
	onShareAppMessage() {
		// 微信小程序分享配置
		if (this.matchDetail) {
			return {
				title: this.matchDetail.title,
				desc: `${this.formatDateRange(this.matchDetail.start_date, this.matchDetail.end_date)} | ${this.matchDetail.location}`,
				path: `/packgeCompetition/competition/share-preview?id=${this.matchId}&from=share`,
				imageUrl: this.matchDetail.poster || ''
			}
		}
		return {}
	},
	
	methods: {
		// 加载比赛详情
		async loadMatchDetail() {
			this.loading = true
			try {
				const matchObject = uniCloud.importObject('match-object')
				const result = await matchObject.getMatchDetail(this.matchId)
				
				if (result.code === 0) {
					this.matchDetail = result.data
					await this.loadScheduleStats()
				} else {
					this.handleError(result.message || '获取比赛详情失败')
				}
			} catch (error) {
				this.handleError('网络错误: ' + error.message)
			} finally {
				this.loading = false
			}
		},
		
		// 加载日程统计信息
		async loadScheduleStats() {
			try {
				const scheduleObject = uniCloud.importObject('match-schedule-object')
				const result = await scheduleObject.getMatchSchedules(this.matchId)
				
				if (result.code === 0 && result.data.list) {
					const schedules = result.data.list
					let totalSlots = 0
					let totalApplications = 0
					
					schedules.forEach(schedule => {
						if (schedule.time_slots) {
							totalSlots += schedule.time_slots.length
							schedule.time_slots.forEach(slot => {
								if (slot.applications) {
									totalApplications += slot.applications.filter(app => app.status !== 'cancelled').length
								}
							})
						}
					})
					
					this.scheduleStats = {
						totalSlots,
						totalApplications
					}
				}
			} catch (error) {
				console.error('加载日程统计失败:', error)
			}
		},
		
		// 查看完整详情
		viewFullDetail() {
			uni.navigateTo({
				url: `/packgeCompetition/competition/detail?id=${this.matchId}`
			})
		},
		
		// 获取状态文本
		getStatusText(status) {
			const statusMap = {
				draft: '草稿',
				published: '已发布',
				in_progress: '进行中',
				completed: '已完成',
				cancelled: '已取消'
			}
			return statusMap[status] || status
		},
		
		// 格式化日期范围
		formatDateRange(startDate, endDate) {
			if (!startDate) return ''
			
			const start = new Date(startDate)
			const end = endDate ? new Date(endDate) : null
			
			if (end && start.toDateString() !== end.toDateString()) {
				return `${start.getMonth() + 1}月${start.getDate()}日 - ${end.getMonth() + 1}月${end.getDate()}日`
			} else {
				return `${start.getMonth() + 1}月${start.getDate()}日`
			}
		},
		
		// 错误处理
		handleError(message) {
			uni.showToast({
				title: message,
				icon: 'none'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.share-preview-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 40rpx 20rpx 120rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.loading-container,
.error-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
	color: white;
}

.error-text {
	margin-top: 20rpx;
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.8);
}

.match-card {
	width: 100%;
	max-width: 600rpx;
	background: white;
	border-radius: 24rpx;
	overflow: hidden;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
	margin-bottom: 40rpx;
}

.share-badge {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 20rpx 30rpx;
	background: linear-gradient(135deg, #1BAE76 0%, #16a085 100%);
	color: white;
}

.share-text {
	font-size: 24rpx;
	color: white;
}

.match-header {
	padding: 30rpx;
	border-bottom: 2rpx solid #f0f0f0;
}

.match-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	line-height: 1.4;
	margin-bottom: 16rpx;
}

.match-status {
	display: inline-block;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	color: #fff;
	
	&.status-draft {
		background-color: #999;
	}
	
	&.status-published {
		background-color: #1BAE76;
	}
	
	&.status-in_progress {
		background-color: #ff9500;
	}
	
	&.status-completed {
		background-color: #007aff;
	}
	
	&.status-cancelled {
		background-color: #ff3b30;
	}
}

.match-info {
	padding: 30rpx;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.info-row {
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.info-text {
	font-size: 28rpx;
	color: #333;
}

.match-description {
	padding: 0 30rpx 30rpx;
	border-bottom: 2rpx solid #f0f0f0;
}

.description-text {
	font-size: 26rpx;
	color: #666;
	line-height: 1.6;
}

.match-stats {
	display: flex;
	justify-content: space-around;
	padding: 30rpx;
	background: #f8f9fa;
}

.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
}

.stat-number {
	font-size: 32rpx;
	font-weight: bold;
	color: #1BAE76;
}

.stat-label {
	font-size: 24rpx;
	color: #666;
}

.bottom-actions {
	width: 100%;
	max-width: 600rpx;
}

.detail-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12rpx;
	padding: 24rpx 0;
	background: linear-gradient(135deg, #1BAE76 0%, #16a085 100%);
	color: white;
	border: none;
	border-radius: 16rpx;
	font-size: 28rpx;
	font-weight: bold;
	box-shadow: 0 8rpx 30rpx rgba(27, 174, 118, 0.3);
}

.detail-text {
	color: white;
}

.share-tip {
	margin-top: 30rpx;
	text-align: center;
}

.tip-text {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.7);
}
</style> 